import { useIntervalFn } from '@vueuse/core'
import dayjs from 'dayjs'
import { ref, computed } from 'vue'
// 封装一个倒计时函数

// 函数要求:
// const {time, start, stop} = useCountDown()
// time: 响应式的数据 用来显示当前计数
// start: 方法 正式开启倒计时  调用这个函数的时候决定当前倒计时的初始值是多少
// stop: 方法 停止倒计时

// 倒计时的核心逻辑: 每隔一秒中 time少一位  (定时器 time--)

// vueUse  一个方法: 每个一定时间执行一个我们自己的函数
function useCountDown () {
  const time = ref(0)
  // 格式化操作
  // xx分xx秒  dayjs  unix() 处理成秒  format('mm分ss秒') 格式化方法
  // 每个一秒钟 执行一下your function
  const formatTime = computed(() => dayjs.unix(time.value).format('mm分ss秒'))

  // 执行函数
  // pause：函数 用来暂停重复执行的逻辑
  // resume: 函数  用来开始进行重复的逻辑
  // 回调函数: 如果想每隔1s做一个事情就把自己的逻辑代码放到your function的位置
  const { pause, resume } = useIntervalFn(() => {
    /* your function */
    // 最多到0就停止
    // 如果我们用的是return的写法 只能控制我们不执行--逻辑 回调还会不断执行
    // 如果我们用的是pause方法 彻底停止我们的定时器 整个回调函数都不会重复执行
    if (time.value === 1) {
      pause()
    }
    time.value--
  }, 1000)

  // 开始倒计时
  function start (count) {
    // 初始化
    time.value = count
    resume()// 开始
  }

  // 手动暂停
  function stop () {
    pause()
  }

  return { time, start, stop, formatTime }
}

export default useCountDown
